<template>
	<view class="bookCity">
		<view class="innerPart">
			<!-- tabber -->
			<view class="tabbar">
				<view class="uni-padding-wrap tabbarSwiper">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper display-multiple-items="6" class="swiper" @click="cutoverActiveSwiperItem">
								<swiper-item>
									<view class="swiper-item" data-index="1">精选</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="2">修仙神作</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="3">VIP</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="4">免费</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="5">新书</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="6">男频</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="7">女频</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="8">出版</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item" data-index="9">漫画</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<view class="more">
					<image class="icon" src="../../static/more.png" mode=""></image>
				</view>
			</view>
			<!-- tabbar -->
			<!-- search -->
			<view class="searchNav">
				<view class="search">
					<uni-icon class="icon" type="search" size="20"></uni-icon>
					<input type="text" value="" />
				</view>
				<view class="classification">
					<uni-icon type="more" size="20"></uni-icon>
					分类
				</view>
			</view>
			<!-- search -->
		</view>
		<!-- 内容主体 -->
		<!-- <content1/>	 -->
		<swiper class="contentSwiper" :style="{height:swiperHeight}" :current="swiperCurrentIndex"  duration ="200">
			<swiper-item>
				<content1/>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/swiper-part2.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item"></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { uniIcon } from "@dcloudio/uni-ui";
	import content1 from "../../components/content1/content1.vue";
	export default {
		components: {
			uniIcon,
			content1
		},
		data() {
			return {
				swiperHeight:'500px',
				swiperCurrentIndex:0
			};
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					console.log(res)
					that.swiperHeight = res.windowHeight-130+'px'
				}
			});
			
		},
		methods:{
			cutoverActiveSwiperItem(e){
				let that = e.target
				this.swiperCurrentIndex = that.dataset.index - 1
				// switch(that.dataset.index){
				// 	case '1':
				// 		this.swiperCurrentIndex = 0;
				// 		break; 
				// 	case '2':
				// 		this.swiperCurrentIndex = 1;
				// 		break; 
				// 	case '3':
				// 		this.swiperCurrentIndex = 2;
				// 		break; 
				// 	case '4':
				// 		this.swiperCurrentIndex = 3;
				// 		break; 
				// }
			}
		}
	}
</script>

<style lang="scss">
	.bookCity {
		display: flex;
		flex-direction: column;
		// 顶部导航
		.tabbar {
			padding-left: 3px;
			color: #666;
			width: 100%;
			display: flex;
			align-items: center;
			height: 30px;
			padding-top: 50px;

			.tabbarSwiper {
				flex: 1;
				height: 30px;

				.swiper {
					height: 30px;

					swiper-item {
						font-size: 16px;
						height: 30px;
					}
				}
			}

			.more {
				.icon {
					width: 30px;
					height: 30px;
				}
			}
		}

		// 搜索
		.searchNav {
			display: flex;
			padding: 10px 12px;
			height: 30px;

			.search {
				background: #eee;
				display: flex;
				flex: 1;
				height: 30px;
				border-radius: 3px;

				input {
					flex: 1;
					height: 100%;
				}

				.icon {
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					color: orange !important;
				}
			}

			.classification {
				padding: 0 8px;
				width: 66px;
				height: 30px;
				line-height: 30px;
				color: red;
				font-size: 18px;
			}
		}

		// 内容主体
		.contentSwiper {
			height: 500px;
			swiper-item {
				overflow: auto;
			}

		}
	}
</style>
